<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="彩色超声多普勒治疗仪" name="1" >
                <div>
                    介绍：使用超声波技术显示彩色图像并提供多普勒效果，用于诊断和治疗心血管疾病、妊娠检查等。
                </div>
                <div>
                    <img src="../assets/images/1.jpg">
                </div>
                <div>
                    使用细节：需要将探头放置在皮肤表面，通过传导胶提高图像质量。医生根据屏幕图像进行诊断和治疗。
                </div>
            </el-collapse-item>
            <el-collapse-item title="C臂型X光机：" name="2">
                <div>
                    介绍：一种实时X光成像设备，常用于手术室和介入性程序中。
                </div>
                <div>
                    <img src="../assets/images/2.jpg">
                </div>
                <div>
                    使用细节：移动式设计，便于在手术台周围操作，提供即时X光图像以辅助手术过程。
                </div>
            </el-collapse-item>
            <el-collapse-item title="CT控制盒：" name="3">
                <div>
                    介绍：控制和优化CT扫描过程的设备。
                </div>
                <div>
                    <img src="../assets/images/3.jpg">
                </div>
                <div>
                    使用细节：与CT机配合使用，通过调整参数和设置来获得最佳成像效果。
                </div>
            </el-collapse-item>
            <el-collapse-item title="CT机：" name="4">
                <div>
                    介绍：通过多角度X光成像创建详细的三维图像，用于诊断各种疾病。
                </div>
                <div>
                    <img src="../assets/images/4.jpg">
                </div>
                <div>
                    使用细节：患者躺在扫描床上，床在环形扫描仪中移动，技术人员控制扫描过程并监控图像质量。
                </div>
            </el-collapse-item>
            <el-collapse-item title="下肢辅助行走设备：" name="5">
                <div>
                    介绍：帮助康复患者恢复步行能力的机械设备。
                </div>
                <div>
                    <img src="../assets/images/5.jpg">
                </div>
                <div>
                    使用细节：患者穿戴设备后，通过电子控制系统辅助步行，逐步恢复正常行走功能。
                </div>
            </el-collapse-item>
            <el-collapse-item title="外骨骼机器人：" name="6">
                <div>
                    介绍：增强人体运动能力和力量的机械外骨骼系统，适用于康复和残疾人士的辅助。

                </div>
                <div>
                    <img src="../assets/images/6.jpg">
                </div>
                <div>
                    使用细节：用户穿戴设备后，通过传感器和电动机提供额外的力量支持，辅助完成日常活动。
                </div>
            </el-collapse-item>
            <el-collapse-item title="牵引器：" name="7">
                <div>
                    介绍：用于医疗康复治疗的设备，通过牵引和拉伸来缓解压力和疼痛。
                </div>
                <div>
                    <img src="../assets/images/7.jpg">
                </div>
                <div>
                    使用细节：根据医生建议设置牵引力度和时间，患者在设备上进行治疗，以缓解脊柱和关节压力。
                </div>
            </el-collapse-item>
            <el-collapse-item title="代步轮椅：" name="8">
                <div>
                    介绍：专为行动不便的个人设计的电动或手动轮椅，提供便捷的移动解决方案。
                </div>
                <div>
                    <img src="../assets/images/8.jpg">
                </div>
                <div>
                    使用细节：用户坐在轮椅上，通过手动推杆或电动控制器移动，适应各种地形和环境。
                </div>
            </el-collapse-item>
            <el-collapse-item title="纯水仪：" name="9">
                <div>
                    介绍：用于生成高纯度水的实验室设备。
                </div>
                <div>
                    <img src="../assets/images/9.jpg">
                </div>
                <div>
                    使用细节：将水源连接到设备，通过多级过滤和纯化系统生成纯水，供实验使用。
                </div>
            </el-collapse-item>
            <el-collapse-item title="稀释仪：" name="10">
                <div>
                    介绍：用于准确稀释和配制化学试剂的设备。
                </div>
                <div>
                    <img src="../assets/images/10.jpg">
                </div>
                <div>
                    使用细节：设置所需浓度和体积，将试剂和溶剂加入设备，自动完成稀释过程。
                </div>
            </el-collapse-item>
            <el-collapse-item title="血浆机：" name="11">
                <div>
                    介绍：用于分离血液中的血浆成分，常用于医疗实验室和输血中心。
                </div>
                <div>
                    <img src="../assets/images/11.jpg">
                </div>
                <div>
                    使用细节：将血液样本放入设备，启动离心程序，分离出血浆供进一步分析或治疗使用。
                </div>
            </el-collapse-item>
            <el-collapse-item title="X荧光分析仪：" name="12">
                <div>
                    介绍：用于分析样本中的元素成分，广泛用于环境监测和质量控制。

                </div>
                <div>
                    <img src="../assets/images/12.jpg">
                </div>
                <div>
                    使用细节：将样本放入分析仪，通过X射线激发元素发射荧光，设备检测并分析荧光谱图以确定元素含量。
                </div>
            </el-collapse-item>
                    <el-collapse-item title="脑波设备：" name="13">
                        <div>
                            <img src="../assets/images/13.jpg">
                        </div>
                        <div>
                            使用细节：将电极贴片贴在头皮上，设备记录脑电波信号并传输到计算机进行分析。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="老人陪护机器人：" name="14">
                        <div>
                            介绍：智能机器人，提供老年人护理和陪伴服务，包括日常生活支持和健康监测。

                        </div>
                        <div>
                            <img src="../assets/images/14.jpg">
                        </div>
                        <div>
                            使用细节：通过语音和触控操作，机器人提供提醒、辅助活动和紧急呼救功能。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="颈椎治疗仪：" name="15">
                        <div>
                            介绍：用于治疗颈椎相关疾病和疼痛的医疗设备，通过物理疗法和按摩缓解症状。

                        </div>
                        <div>
                            <img src="../assets/images/15.jpg">
                        </div>
                        <div>
                            使用细节：将设备佩戴在颈部，根据需要设置按摩和热敷模式，缓解颈部不适。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="护眼仪：" name="16">
                        <div>
                            介绍：用于眼部健康保健和护理的设备，包括眼睛按摩、热敷和光疗功能。

                        </div>
                        <div>
                            <img src="../assets/images/16.jpg">
                        </div>
                        <div>
                            使用细节：使用时将设备覆盖在眼部，选择合适的模式和时间进行护理。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="血糖检测仪：" name="17">
                        <div>
                            介绍：用于监测和测量血液中葡萄糖水平的便携式医疗设备，管理糖尿病患者血糖。

                        </div>
                        <div>
                            <img src="../assets/images/17.jpg">
                        </div>
                        <div>
                            使用细节：通过指尖采血，将血样滴在测试条上，插入设备读取血
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="心电监测仪：" name="18">
                        <div>
                            介绍：记录和分析心脏电活动的设备，用于心脏病患者的诊断和治疗跟踪。
                        </div>
                        <div>
                            <img src="../assets/images/18.jpg">
                        </div>
                        <div>
                            使用细节：将电极贴片贴在胸部，设备记录心电图并传输到医疗设备或云端进行分析。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="点滴警报仪：" name="19">
                        <div>
                            介绍：监测和警示静脉输液和点滴治疗的设备，确保治疗安全和有效性。

                        </div>
                        <div>
                            <img src="../assets/images/19.jpg">
                        </div>
                        <div>
                            使用细节：连接到输液管路，监测液体流量和压力，异常情况时发出警报通知医护人员。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="BMI测试仪：" name="20">
                        <div>
                            介绍：测量身体质量指数（BMI）的设备，帮助评估体重和健康风险。

                        </div>
                        <div>
                            <img src="../assets/images/20.jpg">
                        </div>
                        <div>
                            使用细节：站在设备上，输入身高和体重，设备计算并显示BMI值。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="制氧机：" name="21">
                        <div>
                            介绍：生成和提供纯氧气的医疗设备，用于呼吸支持和治疗患者的氧疗。

                        </div>
                        <div>
                            <img src="../assets/images/21.jpg">
                        </div>
                        <div>
                            使用细节：将鼻导管或面罩连接到设备，设定氧流量，患者通过呼吸吸入氧气。
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="雾化器：" name="22">
                        <div>
                            介绍：将液体药物转化为细小颗粒的设备，通过呼吸吸入进入肺部，治疗呼吸道疾病和支持呼吸治疗。
                        </div>
                        <div>
                            <img src="../assets/images/22.jpg">
                        </div>
                        <div>
                            使用细节：将药物放入设备，连接面罩或喷嘴，启动设备进行雾化吸入。
                        </div>
                    </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}
</script>


<style scoped>
.demo-collapse{
display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 垂直排列子元素 */
    height: 100%; /* 需要确保父容器有高度 */
}

img{
    height: 400px;
    width: 600px;
}

</style>